<template>
  <el-container style="height: 100vh">
    <el-header id="header">
      <navbar :view="view"/>
    </el-header>
    <el-main style="height: 100vh;padding: 0">
      <div class="container-wrap">
        <div class="zt-designer">
          <!--左边-基础图形选择-->
          <toolbar class="zt-designer-left" :view="view"/>
          <!--中间-设计器主要区域-->
          <stage class="zt-designer-content"/>
          <!--右边-属性编辑区域-->
          <panel class="zt-designer-right"/>
        </div>
      </div>
    </el-main>

    <context-menu ref="contextmenu"></context-menu>
  </el-container>
</template>
<script>
  import vpd from './mixins/vpd';
  import Vue from 'vue';
  import Navbar from './components/navbar';
  import Toolbar from './components/toolbar';
  import Stage from './components/stage/index.vue';
  import Panel from './components/panel';
  import {getView} from '@/api/iot/view';
  import widgetInstall from './plugins/widget';
  import ContextMenu from './components/contextmenu';
  // import dataSourceInstall from './plugins/dataSource';

  export default {
    name: 'PageDesigner',
    mixins: [vpd],
    components: {
      Navbar,
      Toolbar,
      Stage,
      Panel,
      ContextMenu
    },
    data() {
      return {
        view: {},
        activeItem: {}, // 当前选中的元素
        // 页面上的所有元素
        items: []
      }
    },
    created() {
      // 注册 widgets
      Vue.use(widgetInstall);
    },
    beforeMount() {
      const id = this.$route.query.id;
      this.getViewInfo(id);
    },
    methods: {
      getViewInfo(id) {
        getView(id).then(res => {
          this.view = res.data;
          // 初始化已有数据
          if (this.view.content) {
            const content = JSON.parse(this.view.content);
            this.$vpd.replaceState(content);
          }
        })
      }
    }
  }
</script>
<style lang="scss">
  .el-collapse-item__header.is-active {
    border-bottom-color: #e6ebf5;
  }

  .el-collapse-item__header {
    padding-left: 15px;
    height: 40px;
    line-height: 40px;
  }

  .el-collapse-item__content {
    padding-bottom: 0;
  }

  .el-collapse-item__wrap {
    padding: 5px 0;
  }


  .el-scrollbar .el-scrollbar__wrap {
    /*overflow: hidden;*/
    overflow: scroll;
    height: calc(100% + 17px);
    /*width: calc(100% + 20px);
    height: calc(100% + 20px);*/
  }

  .el-slider__runway {
    margin: 0 0;
  }

  #header {
    height: 45px !important;
    line-height: 45px;
    color: #fff;
    background-color: rgb(84, 92, 100);

    .viewName {
      width: 200px;
    }

    .saveBtn {
      margin-left: 30px;
    }
  }

  .container-wrap {
    position: relative;
    width: auto;
    height: 100%;

    .zt-designer {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;

      .zt-designer-left {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 264px;
        height: 100%;
        left: 0;
        border-right: 1px solid #dadada;
        overflow: hidden;
      }

      .zt-designer-content {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 264px;
        right: 284px;
        overflow: hidden;
      }

      .zt-designer-right {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 284px;
        height: 100%;
        right: 0;
        border-left: 1px solid #ddd;
        overflow: hidden;
      }
    }
  }
</style>
